<template>
  <div
    id="lines"
    :style="{marginTop:styles.marginTB+'px',marginBottom:styles.marginTB+'px'}"
  >
    <div
      :style="{borderColor:styles.colorBg,borderWidth:styles.height+'px'}"
      v-if="styles.type == 1"
      class="line-one"
    ></div>
    <div
      :style="{borderColor:styles.colorBg,height:styles.height+'px'}"
      v-if="styles.type == 2"
      class="line-two"
    ></div>
    <div
      :style="{borderColor:styles.colorBg,borderWidth:styles.height+'px'}"
      v-if="styles.type == 3"
      class="line-three"
    ></div>
    <div
      :style="{borderColor:styles.colorBg,borderWidth:styles.height+'px'}"
      v-if="styles.type == 4"
      class="line-four"
    ></div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "lines",
  data() {
    return {};
  },
  props: ["styles"],
};
</script>

<style lang="less" scoped>
#lines {
  .line-one {
    border-top: 2px solid #eee;
  }
  .line-two{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    height: 8px;
  }
  .line-three{
    border-top: 2px dashed #eee;
  }
  .line-four{
    border-top: 2px dotted #eee;
  }
}
</style>
